$(function () {
    let layer = layui.layer
    // 参数设置为全局对象，因为将来筛选和分页都要用
    let q = {
        pagenum: 1,   // 是	init	页码值
        pagesize: 2,  // 是	init	每页显示多少条数据
        cate_id: '',  // 否	string	文章分类的 Id
        state: '',    // 否	string	文章的状态，可选值有：已发布、草稿
    }

    // 需求1：初始化文章列表 - 封装成函数，将来复用
    initArticleList()
    function initArticleList() {
        axios({
            method: 'GET',
            url: '/my/article/list',
            params: q
        }).then(res => {
            let arr = []
            res.data.data.forEach(ele => {
                arr.push(`
                    <tr>
                        <td>${ele.title}</td>
                        <td>${ele.cate_name}</td>
                        <td>${setDate(ele.pub_date)}</td>
                        <td>${ele.state}</td>
                        <td>
                            <button data-id = ${ele.Id} class="delBtn layui-btn layui-btn-danger layui-btn-xs">删除</button>
                            <a href="/home/article/art_edit.html?${ele.Id}" class="editBtn layui-btn layui-btn-xs">编辑</a>
                        </td>
                    </tr>
                `)
            });
            $("tbody").empty().html(arr)
            // 渲染完毕后进行分页处理
            renderPage(res.data.total)
        })
    }

    // 需求2：文章分类渲染
    let form = layui.form
    initArtCate()
    function initArtCate() {
        axios({
            method: 'GET',
            url: '/my/article/cates'
        }).then(res => {
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }
            let arr = ['<option value="">请选择文章类别</option>']
            res.data.data.forEach(ele => {
                arr.push(`
                    <option value=${ele.Id}>${ele.name}</option>
                `)
            })
            let str = arr.join('')
            $('[name=cate_id]').empty().html(str)
            // form.render可以渲染select/checkbox/radio
            form.render() // 本质就是根据select标签生成dl标签
        })
    }

    // 需求3:渲染筛选
    $("#searchForm").on('submit', function (e) {
        e.preventDefault()
        q.cate_id = $('[name=cate_id]').val()
        q.state = $('[name=state]').val()
        // 重新初始化文章列表
        initArticleList()
    })
    // 重置
    $("#searchForm").on('reset', function () {
        q.cate_id = ''
        q.state = ''
        // 重新初始化文章列表
        initArticleList()
    })

    // 需求4:分页
    function renderPage(total) {
        let laypage = layui.laypage;

        //执行一个laypage实例
        laypage.render({
            elem: 'pageBox', //注意，这里的 pageBox 是 ID，不用加 # 号
            count: total,//数据总数，从服务端得到
            limit: q.pagesize,//每页显示多少条
            curr: q.pagenum, //第几页
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
            limits: [2, 3, 5, 10],
            jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
                // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                // console.log(obj.limit); //得到每页显示的条数

                //首次不执行
                if (!first) {
                    // 把当前页改变，重新渲染文章列表
                    q.pagenum = obj.curr
                    q.pagesize = obj.limit
                    initArticleList()
                }
            }
        });
    }

    // 需求5:删除
    $("tbody").on('click', '.delBtn', function () {
        let id = $(this).attr('data-id')
        // alert(id)
        axios({
            method: 'GET',
            url: '/my/article/delete/' + id
        }).then(res => {
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }
            layer.confirm('是否删除?', { icon: 3, title: '提示' }, function (index) {
                layer.msg('删除成功！')
                // bug解决：再次刷新页面之前，判断逻辑pagenum是否要-1
                // 发送ajax，删除文章成功，前端依然有这条数据，需要用新数据覆盖！
                // 页面中只有一个元素了，而我收到了一个删除成功的响应。。。
                /* if ($('.delBtn').length == 1 && q.pagenum > 1) {
                    q.pagenum--
                } */
                // 优化:短路运算
                $('.delBtn').length == 1 && q.pagenum > 1 && q.pagenum--
                // 刷新页面
                initArticleList()

                layer.close(index);
            })

        })
    })

    // 需求6:编辑功能
    $('tbody').on('click', '.editBtn', function () {
        // location.href = 
    })

})